<template>
  <div class="container">
    <el-menu 
      theme="dark"
      :default-active="activeIndex" 
      class="el-menu-demo"
      mode="horizontal" 
     >
      <el-menu-item index="1">
        <div class="item-box">
          <icon name="film" flip="horizontal"></icon>
          <label for="">最新</label>
        </div>
      </el-menu-item>
      <el-menu-item index="2">
        <div class="item-box">
          <icon name="hand-rock-o" flip="horizontal"></icon>
          <label for="">动作</label>
        </div> 
      </el-menu-item>
      <el-menu-item index="3">
        <div class="item-box">
          <icon name="smile-o" flip="horizontal"></icon>
          <label for="">喜剧</label>
        </div> 
      </el-menu-item>
      <el-menu-item index="4">
        <div class="item-box">
          <icon name="heart-o" flip="horizontal"></icon>
          <label for="">爱情</label>
        </div>
      </el-menu-item>
      <el-menu-item index="5">
        <div class="item-box">
          <icon name="drupal" flip="horizontal"></icon>
          <label for="">恐怖</label>
        </div>
      </el-menu-item> 
      <el-menu-item index="6">
        <div class="item-box">
          <icon name="space-shuttle" flip="horizontal"></icon>
          <label for="">科幻</label>
        </div>
      </el-menu-item>
      <el-menu-item index="7">
        <div class="item-box">
          <icon name="anchor" flip="horizontal"></icon>
          <label for="">动画</label>
        </div>
      </el-menu-item> 
    </el-menu>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      activeIndex: '1',
    }
  }
}
</script>

<style>
.container {
  width: 100%;
}

.main {
  margin: auto;
  width: 1000px;
  box-sizing: border-box;
  padding: 20px;
}

.item-box {
  width: 60px;
  display:flex;
  justify-content: space-around;;
  align-items: center;
}
</style>
